{extend name="base" /}
{block name="css"}
 <!--这里写本页面需要的css样式-->
  
    <link rel="stylesheet" href="{__STATIC__}/libs/css/sb-admin-2.min.css">
   <style>
    body {
        background-image: url("/static/libs/images/user.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100vh;
        background-position: center 0;
    }

    body:before {
        content: "";
        background-color: rgba(0, 0, 0, .2);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .login-captcha {
        height: 38px;
        width: 140px;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #e6e6e6;
        border-radius: 2px !important;
        position: absolute;
        right: 60px;
    }
    .login-wrapper {
        max-width: 420px;
        padding: 20px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        z-index: 2;
    }

    .login-wrapper > .layui-form {
        padding: 25px 30px;
        background-color: #fff;
        box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
        box-sizing: border-box;
        border-radius: 4px;
    }

    .login-wrapper > .layui-form > h2 {
        color: #333;
        font-size: 18px;
        text-align: center;
        margin-bottom: 25px;
    }

    .login-wrapper > .layui-form > .layui-form-item {
        margin-bottom: 25px;
        position: relative;
    }

    .login-wrapper > .layui-form > .layui-form-item:last-child {
        margin-bottom: 0;
    }

    .login-wrapper > .layui-form > .layui-form-item > .layui-input {
        height: 46px;
        line-height: 46px;
        border-radius: 2px !important;
    }

    .login-wrapper .layui-input-icon-group > .layui-input {
        padding-left: 46px;
    }

    .login-wrapper .layui-input-icon-group > .layui-icon {
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 20px;
        color: #909399;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
    }

    .login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
        padding-right: 135px;
    }

    .login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
        height: 46px;
        width: 120px;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #e6e6e6;
        border-radius: 2px !important;
        position: absolute;
        right: 0;
        top: 0;
    }

    .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
        margin: 0 !important;
        padding-left: 25px;
    }

    .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
        width: 15px !important;
        height: 15px !important;
    }

    .login-wrapper > .layui-form .layui-btn-fluid {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        border-radius: 2px !important;
    }

    .login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
        font-size: 26px;
    }

    .login-copyright {
        color: #eee;
        padding-bottom: 20px;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    @media screen and (min-height: 550px) {
        .login-wrapper {
            margin: -250px auto 0;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            width: 100%;
        }

        .login-copyright {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
        }
    }

    .layui-btn {
        background-color: #5FB878;
        border-color: #5FB878;
    }

    .layui-link {
        color: #5FB878 !important;
    }
.notClick{
height:40px; pointer-events: none
 } 
</style>
{/block}
{block name="body"}
    <div class="container" style="margin-top:120px;">
        <!-- Outer Row -->
        <div class="row justify-content-center">
            <div class="col-xl-10 col-lg-12 col-md-9">
                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="row">
                            <div class="col-lg-6 d-none d-lg-block bg-register-image"></div>
                            <div class="col-lg-6">
                                <div class="p-5">
                                    <div class="text-center">


            <h1 class="h4 text-gray-900 mb-4"><img src="<?php echo seo('image');?>" width="80%" height="60"></h1>
          
                                    </div>
                 <form id="login_form" class="layui-form" action="" method="post">
          <div class="form-group">
            <input class="layui-input" name="email" id="email" value="<?php echo base64_decode($_GET['email']);?>" placeholder="{:__('mailbox')}" autocomplete="off" lay-verify="required" required readonly="readonly"/>
                          </div>   

                 <div class="form-group" style="text-align: center;line-height: 40px;">
                                            
            <botton lay-filter="sendout" id="send" lay-submit class="login-captcha"/><i>点击发送</i></botton>
             <input class="form-control form-control-user" id="code" name="code" placeholder="请输入验证码" autocomplete="off"/>
                                            
                  </div>
                <div class="form-group">                
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />  
              <input class="form-control form-control-user" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" />   
                  </div>
               <div class="form-group">
                  <div class="custom-control custom-checkbox small">
             
             <input type="checkbox" name="keeplogin" id="keeplogin" value="1" title="{:__('Remember')}" lay-skin="primary" checked readonly="readonly"/>
                            </div>
                        </div>
                                        <font color="red"></font>
                                       
          <input type="submit" class="btn btn-success layui-btn-normal btn-user btn-block" lay-filter="savesave" lay-submit value="{:__('Submit for verification')}" id="submitBtn" disabled>
       
                                    </form>
                                    <hr>
                                    <div class="text-center">
                                        <div class="login-copyright">{:seo('copyright')}<br><a href="http://beian.miit.gov.cn">{:seo('beian')}</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- js部分 -->

{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
    form.on('submit(sendout)', function (data) {
                //清空input
                $("input[name='code']").val("").focus();
                $("input[name='password']").val("").focus();
   var index = layer.msg('<i>{:__('Sending, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });
    $.ajax({
         url: "{:url('lnadmin/authentication')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
            //$('input[name="code"]').val(result.captcha);
             // layer.msg('发送成功', {icon: 1});
                setTimeout(function () {
                     if(isNaN(parseInt($("#captcha").html()))){
                        var origText  = '60';
                        var interval = setInterval(function(){
                            var time = --origText;
                            if(time <= 0) {
                                clearInterval(interval);
                                $('#send').html('{:__('Resend')}').css('border','none').css('color','#000').removeClass("notClick");
                            }else{
                                $('#send').html(time+'&nbsp;&nbsp;{:__('second')}').css('color','#ff2222').addClass('notClick');
                            
                        }
                        }, 1000);
                   // parent.location.reload();
                   }
                }, 1000);

            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
form.on('submit(savesave)', function (data) {
    var index = layer.msg('<i>{:__('Verification in progress, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });

    $.ajax({
        url: "{:url('lnadmin/authenticationcheck')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
    
});
});

</script>
  <script>
    const code = document.getElementById('code');
    const captcha = document.getElementById('captcha');
    const submitBtn = document.getElementById('submitBtn');

    
    code.addEventListener('input', checkInputs);
    captcha.addEventListener('input', checkInputs);

    function checkInputs() {
      if (code.value && captcha.value) {
        submitBtn.disabled = false; 
      } else {
        submitBtn.disabled = true;
      }
    }
  </script>
{/block}